<template>
  <div>
    <u-modal
      v-model="show"
      :title="title"
      :title-style="titleStyle"
      :show-title="showTitle"
      :showConfirmButton="false"
    >
      <slot></slot>
      <view class="u-flex btnBox">
        <u-button class="btn" @click="cancel" v-show="showCancelBtn">{{cancleText}}</u-button>
        <u-button
          class="btn"
          @click="confirm"
          v-show="showConfirmBtn"
          :type="type"
          :disabled="disabled"
          :customStyle="customStyle"
        >{{confirmText}}</u-button>
      </view>
    </u-modal>
  </div>
</template>

<script>
export default {
  name: 'closeNotice',
  data() {
    return {
      show: false
    }
  },
  /**
   * @param title 模态框标题
   * @param showTitle  是否展示模态框标题；默认为true
   * @param showCancelBtn 是否展示取消按钮
   * @param showConfirmBtn 是否展示确认按钮
   * @param type 按钮类型，可选值参考 https://uviewui.com/components/button.html
   * @param disabled 控制确认按钮是否禁用
   * @param cancleText 取消按钮文字
   * @param confirmText 确认按钮文字
   */
  props: {
    title: {
      type: String,
      default: '温馨提示'
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    showCancelBtn: {
      type: Boolean,
      default: true
    },
    showConfirmBtn: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'primary'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    cancleText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    customStyle:{
      type: Object | String,
      default: {
        background:'#0052D9'
      }
    }
  },
  mounted() {},
  methods: {
    // 显示弹窗
    showModal() {
      this.show = true
    },
    // 点击确认按钮
    confirm() {
      console.log('确认')
      this.$emit('confirm')
      // this.show = true;
    },
    // 点击取消按钮
    cancel() {
      // console.log('取消')
      // this.$emit('cancel')
      this.show = false
    }
  },
  watch: {
    // 监听表单状态，关闭时做一些清除表单验证等操作
    show(val) {
      if (!val) {
        // 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
        this.$emit('cancel')
      }
    }
  },
  computed: {
    titleStyle() {
      return {
        fontSize: '32rpx',
        fontFamily: 'PingFang SC-Semibold, PingFang SC',
        fontWeight: 600,
        color: '#000000',
        lineHeight: '48rpx',
		paddingTop: '32rpx',
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.btnBox {
  justify-content: space-around;
  .btn {
    width: 248rpx;
    height: 80rpx;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #323233;
    line-height: 80rpx;
    margin-bottom: 48rpx;
  }
}
</style>
